<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, Spec, SpecValue } from '@/types/goods'
import bwPowerSet from '@/utils/power-set'
// console.log(bwPowerSet(['蓝色','中国','20cm']));
const props = defineProps<{
  goods: GoodsInfo
  skuid?: string
}>()
const emits = defineEmits<{
  (e: 'changeGoods', value: string): void
}>()
//点击商品规格选中处理
const changeSelected = (item: Spec, sub: SpecValue) => {
  if (sub.disabled) return
  // 为点击的项添加或移出selected类名
  // console.log(item, sub);
  if (sub.selected) {
    sub.selected = false
  } else {
    // 将其他的类名关闭
    // console.log(item);
    item.values.forEach(item => item.selected = false)
    sub.selected = true
  }
  // const arr = getSelectedSpec()
  // console.log(arr);
  SpecDisabled()
  // 子传父
  const resultArr = getSelectedSpec()
  //选完之后 子传父
  //判断resultArr中有没有'' 没有就发请求 或者过滤一遍检测非空值
  // console.log(resultArr.includes('')); //方法1
  // console.log(resultArr.filter(v=>v).length);
  const filterArr = resultArr.filter(v => v)
  if (filterArr.length === props.goods.specs.length) {
    //直接将resultArr处理成字符串去字典中找对应的id
    const key = filterArr.join('+')
    // console.log(pathMap[key][0]);
    const skuid = pathMap[key][0]
    emits('changeGoods', skuid)
  } else {
    emits('changeGoods', '')
  }
}

//获取路径字典函数
const getPathMap = () => {
  const pathMap: {
    [key: string]: string[]
  } = {} //字典
  // console.log(props.goods.skus);
  const skus = props.goods.skus.filter(sku => sku.inventory > 0)
  // console.log(skus);
  //将每一个sku的规格类型收集到一个数组里
  skus.forEach(sku => {
    const arr = sku.specs.map(item => item.valueName)
    // console.log(arr);
    //求子级
    const sets = bwPowerSet(arr)
    //每一个sku的子集
    // console.log(sets);
    // 将子级的情况处理成字符串往对象中加属性
    sets.forEach(set => {
      const key = set.join('+')
      // console.log(key);//键
      // 判断对象是否有某个键，没有就创建 有就追加值
      if (pathMap[key]) {
        //追加
        pathMap[key].push(sku.id)
      } else {
        //创建一个属性存
        // pathMap[key] = []
        // pathMap[key].push(sku.id)
        pathMap[key] = [sku.id]
      }
    })
  })
  return pathMap
}
//页面一加载就获取路径字典
const pathMap = getPathMap()
// console.log(pathMap);



//为点击切换准备由顺序的一个数组
const getSelectedSpec = () => {
  const arr: string[] = []
  props.goods.specs.forEach((spec, i) => {
    // console.log(spec.values);
    const btn = spec.values.find(btnObj => btnObj.selected)
    // console.log(btn);
    if (btn) {
      arr[i] = btn.name
    } else {
      arr[i] = ''
    }
    // if (btn) arr.push(btn.name) //只能保证数组有顺序
  })
  return arr
}

//判断那些按钮页面一家在就要禁用
const SpecDisabled = () => {
  const arr = getSelectedSpec()
  // console.log(arr);
  props.goods.specs.forEach((spec, i) => { //spec每一行
    spec.values.forEach(btnObj => { //每一个规格按钮对象
      // console.log(btnObj.name); //每一个规格按钮的名字
      const newArr = [...arr]
      //检查按钮是否还在字典中
      newArr[i] = btnObj.name
      // console.log(newArr);
      const key = newArr.filter(v => v).join('+')
      // console.log(key);

      if (pathMap[key]) {
        btnObj.disabled = false
      } else {
        btnObj.disabled = true
      }
    })
  })
}
SpecDisabled()

//默认选中商品规格 父传子
const defaultSelect = () => {
  if (!props.skuid) return
  const sku = props.goods.skus.find(sku => sku.id === props.skuid)
  // console.log(sku);
  //如果找到了将对应的规格按钮 选中
  if (sku) {
    props.goods.specs.forEach((spec, i) => { //spec 每一行规格
      spec.values.forEach(value => { //每一个规格的按钮对象
        // console.log(value.name); //每一个规格按钮的名字
        if (value.name === sku.specs[i].valueName) {
          value.selected = true
        }
      })
    })
  }
}
defaultSelect()
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="sub in item.values" :key="sub.name">
          <img v-if="sub.picture" :class="{ selected: sub.selected, disabled: sub.disabled }" :src="sub.picture"
            @click="changeSelected(item, sub)" alt="" />
          <!-- <img class="disabled" src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png" alt="" /> -->
          <span v-else :class="{ selected: sub.selected, disabled: sub.disabled }" @click="changeSelected(item, sub)">{{
              sub.name
          }}</span>
        </template>
      </dd>
    </dl>

  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;

  &.selected {
    border-color: @xtxColor;
  }

  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      >img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }

      >span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>

